<template>
  <div style="padding: 40px">
    <div style="margin: 10px 0;">
      <el-button type="primary" style="margin-left: 10px;" @click="add" >新增地址</el-button>

    </div>


    <el-table :data="tableData" border stripe style="width: 100%;">
      <el-table-column type="index" label="通知ID" width="100px" />
      <el-table-column label="地址" >
        <template slot-scope="scope">
          {{  `省：${scope.row.address.province || ''}，市：${scope.row.address.city|| ''}，区：${scope.row.address.area|| ''}，电话：${scope.row.address.phone || ''}，名字：${scope.row.address.name || ''}, 备注信息：${scope.row.address.detailAddress|| ''}` }}
        </template>
      </el-table-column>
      <el-table-column label="是否为默认地址" >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <el-tag type="success" v-if="scope.row.isDefault === 1">是</el-tag>
          <el-tag type="info" v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="350">
        <template #default="scope">
          <!-- 编辑按钮  -->
          <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <!-- 编辑按钮  -->
          <el-button type="warning" :disabled="scope.row.isDefault == 1"    @click="setDetail(scope.row.addressId)" style="margin-right: 10px;">设为默认地址</el-button>
          <!-- 删除按钮 -->
          <el-popconfirm title="这段内容确定删除吗?" @confirm="handleDelete(scope.row.addressId)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="添加地址" width="50%" @close="handleClose" >
      <el-form :model="form" label-width="120px"  :rules="rules" ref="ruleForm">
         <!-- 名称 -->
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入名称"></el-input>
        </el-form-item>

        <!-- 省 -->
        <el-form-item label="省" prop="province">
          <el-input v-model="form.province" placeholder="请输入省"></el-input>
        </el-form-item>

        <!-- 市 -->
        <el-form-item label="市" prop="city">
          <el-input v-model="form.city" placeholder="请输入市"></el-input>
        </el-form-item>

        <!-- 县 -->
        <el-form-item label="区" prop="county">
          <el-input v-model="form.county" placeholder="请输入县"></el-input>
        </el-form-item>

        <!-- 电话 -->
        <el-form-item label="电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入电话"></el-input>
        </el-form-item>

        <!-- 详细地址 -->
        <el-form-item label="详细地址">
          <el-input
            v-model="form.detailedAddress"
            placeholder="请输入详细地址"
            type="textarea"
            :rows="3"
          ></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 点击编辑的弹窗 -->
    <el-dialog :visible.sync="dialogVisible1" title="编辑通知" width="30%" @close="handleClose">

      <el-form :model="form1" label-width="120px" :rules="rules"  ref="ruleForm1">
         <!-- 名称 -->
        <el-form-item label="名称" prop="name">
          <el-input v-model="form1.name" placeholder="请输入名称"></el-input>
        </el-form-item>

        <!-- 省 -->
        <el-form-item label="省" prop="province">
          <el-input v-model="form1.province" placeholder="请输入省"></el-input>
        </el-form-item>

        <!-- 市 -->
        <el-form-item label="市" prop="city">
          <el-input v-model="form1.city" placeholder="请输入市"></el-input>
        </el-form-item>

        <!-- 县 -->
        <el-form-item label="县" prop="county">
          <el-input v-model="form1.county" placeholder="请输入县"></el-input>
        </el-form-item>

        <!-- 电话 -->
        <el-form-item label="电话" prop="phone">
          <el-input v-model="form1.phone" placeholder="请输入电话"></el-input>
        </el-form-item>

        <!-- 详细地址 -->
        <el-form-item label="详细地址" prop="detailedAddress">
          <el-input
            v-model="form1.detailedAddress"
            placeholder="请输入详细地址"
            type="textarea"
            :rows="3"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {  getAddressList ,getaAddressAdd,getAddressRemove,getAddressUpdate,getAddressSetDetail} from '@/http/address'

export default {
  data() {
    return {
      form: {
        name: '', // 名称
        province: '', // 省
        city: '', // 市
        county: '', // 县
        phone: '', // 电话
        detailedAddress: '' // 详细地址
      },
      form1: {
         name: '', // 名称
          province: '', // 省
          city: '', // 市
          county: '', // 县
          phone: '', // 电话
          detailedAddress: '' ,// 详细地址
          id: '' // id
      },
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      currentPage: 1,
      pageSize: 5,
      tableData: [],
      rules: {
          name: [
            { required: true, message: '姓名', trigger: 'blur' },
          ],
          province: [
            { required: true, message: '请输入省', trigger: 'blur' },
          ],
          city: [
            { required: true, message: '请输入市', trigger: 'blur' },
          ],
          county: [
            { required: true, message: '请输入县', trigger: 'blur' },
          ],
          phone: [
            { required: true, message: '请输入电话', trigger: 'blur' },
          ],
          detailedAddress: [
            { required: false, message: '请输入详细地址', trigger: 'blur' },
          ],
      }
    }

  },
  created() {
    this.load()
  },

  methods: {
    handleClose() {
      this.$refs['ruleForm'].resetFields()
  
      this.$refs['ruleForm1'].resetFields()
     
    },
    async load() {
      this.tableData = []
      const { code, message, data } = await getAddressList()
      let data1 = ''
      if (code == '0') {
        this.$message({
          type: "success",
          message: "查询成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "查询失败" + message
        })
      }
      console.log(data);
      data.forEach(element => {
    
        data1 = element
        data1.address = JSON.parse(element.address)
        this.tableData.push(data1)
      })
    },
    add() {
      this.dialogVisible = true
    },
    // 确认添加
    async save() {
      this.$refs['ruleForm'].validate(async (valid) => {
          if (valid) {
            const { code, message } = await getaAddressAdd({
              address: JSON.stringify(this.form)
            })
            
            console.log(this.form)
            if (code == '0') {
              this.$message({
                type: "success",
                message: "添加成功"
              })
            } else {
              this.$message({
                type: "error",
                message: "添加失败"
              })
            }
            this.dialogVisible = false
            this.load()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    
    },
    // 编辑
    handleEdit(row) {
      console.log(row);
      this.form1 = { ...row.address,addressId: row.addressId }
      this.dialogVisible1 = true
    },
    // 确认修改
    async saveEdit() {
      console.log(this.$refs);
      
      this.$refs['ruleForm1'].validate(async (valid) => {
          if (valid) {
            let data = {
              address : JSON.stringify(this.form1),
              addressId: this.form1.addressId
            }
            const { code, message } = await getAddressUpdate(data)
            if (code == '0') {
              this.$message({
                type: "success",
                message: "修改成功"
              })
            } else {
              this.$message({
                type: "error",
                message: "修改失败"
              })
            }
            this.dialogVisible1 = false
            this.load()
          }
      });
      
    },
    async setDetail(id){
     const {code, message} =  await getAddressSetDetail(id)
     if (code == '0') {
        this.$message({
          type: "success",
          message: "设置成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "设置失败"
        })
      }
      this.load()
    },
    async handleDelete(id) {
    debugger
      console.log(id);
      
      const { code, message } = await getAddressRemove(id)
      if (code == '0') {
        this.$message({
          type: "success",
          message: "删除成功"
        })
      } else {
        this.$message({
          type: "error",
          message: message
        })
      }
      this.load()  // 删除之后重新加载表格的数据
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()

    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.load()
    },
    onDaloag(row) {
      this.form1 = row
      this.dialogVisible2 = true
    }
  },
  computed: {
    ...mapGetters({
      userRole: 'user/getUserRole'
    })
  }

}
</script>

<style></style>